// Colors
// Default

$color-default-black: #000000;
$color-default-white: #ffffff;
$color-transparent: rgba(255, 255, 255, 0);


// Project palette
// для нейминга цветов используем https://www.htmlcsscolor.com/hex/334482

$color-sky-blue: #00b2ff;
$color-pearl: #041827;
$color-pearl-veil: rgba(3, 16, 27, 0.7);
$color-pearl-accent: #041427;
$color-pearl-transparent: rgba(4, 24, 39, 0);
$color-pearl-fade: rgba(4, 20, 39, 0.15);
$color-pearl-overlay: #192024;
$color-alice-blue: #f2f5f6;
$color-whisper: #ebebeb;
$color-invalid: #d00f0f;
$color-valid: #13b313;

// Gradient

$pearl-to-bottom: linear-gradient(180deg, #041827 84.9%, rgba(4, 24, 39, 0) 100%);
$black-to-right: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 75%);

// Typography
// переменная используемая в html для подключения скейлинга

$fz-default: 16px;
$ff-pt-mono: "PT Mono", "Arial", sans-serif;
$ff-roboto-condensed: "Roboto Condensed", "Arial", sans-serif;

// Animation

$tf-default: ease;
$trans-default: 0.3s $tf-default;
$trans-modal: 0.6s cubic-bezier(0.55, 0, 0.1, 1);
$trans-600: 0.6s $tf-default;

// Viewports

$vp-max-mobile: 767px;
$vp-max-tablet: 1023px;
$vp-max-desktop: 1279px;
$vp-max-widescreen: 1439px;
$vp-320: 320px;
$vp-375: 375px;
$vp-768: 768px;
$vp-1024: 1024px;
$vp-1280: 1280px;
$vp-1440: 1440px;
$vp-1920: 1920px;

// Retina

$retina-dpi: 144dpi;
$retina-dppx: 1.5dppx;
